<template>
  <view class="page">
    <image
      class="page-bg"
      src="/pages/customer-center/static/wallet/bg.png"
    />
    <uni-nav-bar
      title="我的余额"
      left-icon="left"
      showMenuButtonWidth
      statusBar
      backgroundColor="transparent"
      :border="false"
      @clickLeft="$tools.back"
    />
    <view class="content">
      <view class="top">
        <view class="top-title"> 仅限蜜雪冰城小程序自提场景使用 </view>
        <view class="top-content">
          <view class="top-content-balance"> 0.00 </view>
          <view class="top-content-label">账户余额（元）</view>
          <view class="top-content-btns">
            <view class="top-content-btns-btn"> 消费明细 </view>
            <view class="top-content-btns-btn"> 我的发票 </view>
            <view class="top-content-btns-btn"> Q&A </view>
          </view>
        </view>
      </view>
      <view class="center">
        <view class="center-title">充值金额</view>
        <view class="center-list">
          <view
            class="center-list-item"
            v-for="(item, index) in amountList"
            :key="item.id"
            :class="{ active: currentAmountIndex === index }"
            @click="handleAmountClick(index)"
          >
            <view class="center-list-item-amount">
              {{ $tools.formatPrice(item.rechargeAmount) }}
            </view>
            <text>元</text>
          </view>
        </view>
      </view>
      <view class="bottom">
        <view class="bottom-header"> 充值福利 </view>
        <view class="bottom-coupons">
          <view
            class="bottom-coupon"
            v-for="(item, index) in currentAmountCoupons"
            :key="index"
          >
            <image
              class="bottom-coupon-icon"
              src="/pages/customer-center/static/wallet/gift_coupon_icon.png"
            />
            <view class="bottom-coupon-info">
              <view class="text-bold text-color font-size-lg mb-lg">
                {{ item.couponRuleName }}
              </view>
              <view class="text-color-grey text-sm">
                领取后有效期{{ item.vaildDays }}天
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="tips">
        <view class="mb-xs"> 提示：个人账户余额不可超过10000元 </view>
        <view>为确保您的资金安全，请妥善保管余额账户</view>
      </view>
      <view class="footer">
        <view class="footer-content">
          <view
            class="mr-sm"
            @tap="isAgree = !isAgree"
          >
            <uni-icons
              :type="isAgree ? 'checkbox-filled' : 'circle'"
              :color="isAgree ? '#E60012' : '#333333'"
              size="14"
            />
          </view>
          <text @tap="isAgree = !isAgree">已阅读并同意</text>
          <text class="text-primary"> 《蜜雪单用途商业预付卡章程》 </text>
          和
          <text class="text-primary"> 《蜜雪会员储值协议》 </text>
        </view>
        <button
          class="footer-btn"
          :disabled="!isAgree"
        >
          去充值
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex"
export default {
  name: "wallet",
  data() {
    return {
      currentAmountIndex: 0,
      isAgree: false
    }
  },
  computed: {
    ...mapState("wallet", ["amountList"]),
    currentAmountCoupons() {
      return this.amountList[this.currentAmountIndex].coupons
    }
  },
  methods: {
    handleAmountClick(index) {
      this.currentAmountIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  padding-bottom: 170rpx;

  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 750rpx;
    height: 520rpx;
  }
}

.content {
  padding: 0 $uni-spacing-row-base;
  display: flex;
  flex-direction: column;
}

.top {
  display: flex;
  flex-direction: column;
  border-radius: $uni-border-radius-xxl;
  background-color: #fff;
  margin-top: 100rpx;
  margin-bottom: $uni-spacing-row-xl;
  position: relative;

  &-title {
    background-color: #fff8f8;
    padding: $uni-spacing-row-base 0;
    text-align: center;
    font-size: $uni-font-size-sm;
    color: $uni-text-color-grey;
    border-radius: $uni-border-radius-xxl $uni-border-radius-xxl 0 0;
  }

  &-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: $uni-spacing-row-xxl 0 70rpx;

    &-balance {
      font-size: 60rpx;
      color: #e60012;
      font-weight: bold;
      margin-bottom: $uni-spacing-row-base;
    }

    &-label {
      font-size: $uni-font-size-base;
      color: $uni-text-color;
    }

    &-btns {
      margin-top: 50rpx;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      &-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 0 $uni-spacing-row-xl;
        font-size: $uni-font-size-sm;
        color: $uni-text-color-grey;

        &:not(:last-child)::after {
          content: " ";
          position: absolute;
          right: 0;
          width: 1px;
          height: 10px;
          background-color: #d9d9d9;
        }
      }
    }
  }
}

.center {
  display: flex;
  flex-direction: column;
  border-radius: $uni-border-radius-xxl;
  background-color: #fff;
  margin-bottom: $uni-spacing-row-base;
  padding: $uni-spacing-row-lg;
  position: relative;

  &-title {
    font-size: $uni-font-size-xl;
    color: $uni-text-color;
    margin-bottom: $uni-spacing-row-xl;
  }

  &-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $uni-spacing-row-base;

    &-item {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 160rpx;
      border-radius: $uni-border-radius-xl;
      border: 1rpx solid #eee;
      font-size: $uni-font-size-base;
      color: $uni-text-color;

      &.active {
        background-color: #fff8f8;
        border-color: #ffbfc6;
      }

      &-amount {
        font-size: 50rpx;
        color: $uni-text-color;
        font-weight: 500;
        margin-right: $uni-spacing-row-xs;
      }
    }
  }
}

.bottom {
  display: flex;
  flex-direction: column;
  border-radius: $uni-border-radius-xxl;
  background-color: #fff;
  margin-bottom: $uni-spacing-row-base;
  border: 1rpx solid #fbdada;
  position: relative;

  &-header {
    background-image: url("/pages/customer-center/static/wallet/gift_title.png");
    background-size: 100% 121rpx;
    background-repeat: no-repeat;
    height: 121rpx;
    color: $uni-text-color;
    font-size: $uni-font-size-xl;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding-left: $uni-spacing-row-lg;
  }

  &-coupons {
    display: flex;
    flex-direction: column;
  }

  &-coupon {
    padding: $uni-spacing-row-xl $uni-spacing-row-lg;
    display: flex;
    align-items: center;

    &-icon {
      width: 100rpx;
      height: 100rpx;
      margin-right: $uni-spacing-row-base;
    }

    &-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}

.tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
  padding: $uni-spacing-row-base 0;
}

.footer {
  height: 170rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: $uni-spacing-row-base;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;

  &-content {
    display: flex;
    align-items: center;
    font-size: $uni-font-size-xs;
    color: $uni-text-color-grey;
    margin-bottom: $uni-spacing-row-base;
  }

  &-btn {
    width: 100%;
    height: 80rpx;
    background-color: $uni-color-primary;
    color: #fff;
    font-size: $uni-font-size-lg;
    font-weight: bold;
    border-radius: $uni-border-radius-lg;
    display: flex;
    align-items: center;
    justify-content: center;

    &[disabled] {
      background-color: #f8b3b8;
      color: #fff;
    }
  }
}
</style>
